<!-- 用户管理页 -->
<template>
  <!-- 顶部条 -->
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">用户列表</span>
    <el-button type="primary" style="float:right;margin-top:13px;">新增管理员</el-button>
  </div>

  <!-- 新增管理员弹窗·未完善 -->
  <el-dialog title="新增管理员" style="width:1000px;padding:40px;">
    <el-form label-width="80px" label-position="top">

    </el-form>
    <template #footer>
      <el-button>取消</el-button>
      <el-button type="primary">确定</el-button>
    </template>
  </el-dialog>

  <!-- 搜索卡片 -->
  <el-card style="margin: 20px;">
    <el-form style="padding-top:10px;">
      <el-row :gutter="30">
        <el-col :span="5">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名" v-model="searchInfo.username"
                      @keydown.enter="loadUser"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="手机号">
            <el-input placeholder="请输入手机号" v-model="searchInfo.phone"
                      @keydown.enter="loadUser"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="职级">
            <el-select placeholder="请选择职级" v-model="searchInfo.level"
                       @change="loadUser">
              <el-option label="超管" value="0"></el-option>
              <el-option label="管理员" value="1"></el-option>
              <el-option label="普通用户" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item>
            <el-button @click="resetSearch">重置</el-button>
            <el-button type="primary" @click="loadUser">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
  <!-- 用户列表 -->
  <el-card style="margin:20px">
    <el-table :data="userList">
      <el-table-column type="index" width="80" align="center" prop="id" label="编号"></el-table-column>
      <el-table-column align="center" prop="username" label="用户名"></el-table-column>
      <el-table-column align="center" prop="gender" label="性别"
                       :formatter="genderTypeFormatter"></el-table-column>
      <el-table-column align="center" prop="name" label="收货人姓名"></el-table-column>
      <el-table-column align="center" prop="phone" label="收货人手机号"></el-table-column>
      <el-table-column align="center" prop="address" label="收货地址"></el-table-column>
      <el-table-column align="center" prop="level" label="职级"
                       :formatter="levelTypeFormatter"></el-table-column>
      <el-table-column label="操作" width="170" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" link :disabled="scope.row.level==0">编辑</el-button>
          <el-button type="primary" size="small" link :disabled="scope.row.level==0">重置密码</el-button>
          <el-button type="primary" size="small" link :disabled="scope.row.level==0">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

// 保存查询条件
const searchInfo = ref({
  username: '',
  phone: '',
  level: ''
});
// 保存用户列表数据
const userList = ref([]);
// 加载用户列表数据
const loadUser = () => {
  // console.log(userList.value);
  let data = qs.stringify(searchInfo.value);
  axios.get(BASE_URL + '/v1/user/select?' + data).then((response) => {
    if (response.data.code === 2000) {
      // console.log(response.data.data);
      userList.value = response.data.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}
onMounted(() => {
  loadUser();
})
// 重置按钮
const resetSearch = () => {
  searchInfo.value = {};
}
// 统一性别格式
const genderTypeFormatter = (row, column, cellValue, index) => {
  if (cellValue == 1) {
    cellValue = '男';
  } else {
    cellValue = '女';
  }
  return cellValue;
}
// 统一职级格式
const levelTypeFormatter = (row, column, cellValue, index) => {
  if (cellValue == 0) {
    cellValue = '超管';
  } else if (cellValue == 1) {
    cellValue = '管理员';
  } else {
    cellValue = '普通用户';
  }
  return cellValue;
}
</script>

<style scoped>

</style>